<template>
  <select name="wanglili" id="wanglili" v-model="selected">
    <option v-for="op in listOptions" :key="op.id" :value="op">{{ op }}</option>
  </select>
  <component :is="realCompnent"></component>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, computed } from "vue";

export default defineComponent({
  setup(props) {
    const listOptions = new Array<string>();
    const selected: string = "c";
    onBeforeMount(() => {
      listOptions.push("a");
      listOptions.push("b");
      listOptions.push("c");
    });
    const realCompnent = computed(() => {
      return "dc-node-" + selected;
    });
    return {
      listOptions,
      realCompnent,
      selected,
    };
  },
});
</script>
<style lang="scss" scoped>
</style>